﻿@using TelerikConnect.Models
@using Kendo.Mvc.UI
@model IEnumerable<UserProfile>
@{
    ViewBag.Title = "Manage Users";
}

<div class="content-wrapper">
    <h2>Manage Users</h2>

    @(Html.Kendo().Grid<UserProfile>()
    .Name("grid")
    .Columns(columns =>
    {
        //columns.Bound(p => p.UserId);
        columns.Bound(p => p.UserName);
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.Email);
        columns.Bound(p => p.AreaOfExpertise);
        columns.Bound(p => p.Avatar);
        columns.Bound(p => p.About);
        columns.Bound(p => p.Statement);

        columns.Command(command => { command.Edit(); }).Width(160);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.UserId))
        .Create(update => update.Action("Create", "Admin"))
        .Read(read => read.Action("Read", "Admin"))
        .Update(update => update.Action("Update", "Admin"))
        .Destroy(update => update.Action("Destroy", "Admin"))
    )
)
</div>

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>